<template>
  <UploaderBase
    accept="audio/*"
    :fileStore="fileStore"
    :label="label"
    :parent_dir="parent_dir"
    @update:fileStore="$emit('update:fileStore', $event)"
  >
    <template v-slot:preview="{ fileStore }">
      <audio controls v-if="fileStore && fileStore.url">
        <source :src="fileStore.url" />
        Your browser does not support the audio tag.
      </audio>
    </template>
  </UploaderBase>
</template>

<script>
  // 上传音频的对话框组件
  import UploaderBase from "./UploaderBase"

  export default {
    name: "AudioUploader",
    functional: false,
    components: {
      UploaderBase,
    },
    model: {
      prop: "fileStore",
      event: "update:fileStore",
    },
    props: {
      label: {
        type: String,
        required: false,
        default: "上传音频文件",
      },
      fileStore: {
        type: Object,
        required: false,
        default: null,
      },
      parent_dir: {
        type: String,
        required: false,
        default: undefined,
      },
    },
  }
</script>
